<template>
  <el-drawer
    v-model="dialogFormVisible"
    :before-close="handleClose"
    destroy-on-close
    direction="rtl"
    :title="title"
    width="30%"
    @close="close"
  >
    <div class="formbody">
      <el-form ref="formRef" :inline="true" label-width="130px" :model="form" :rules="rules">
        <el-form-item label="字典键值" prop="dictValue">
          <el-input v-model="form.dictValue" />
        </el-form-item>
        <el-form-item label="字典标签" prop="dictLabel">
          <el-input v-model="form.dictLabel" />
        </el-form-item>
        <el-form-item label="颜色" prop="color">
          <el-color-picker v-model="form.color" :predefine="predefineColors" show-alpha />
        </el-form-item>
        <el-form-item label="是否默认" prop="isDefault">
          <el-select v-model="form.isDefault" clearable placeholder="是否默认">
            <el-option v-for="item in WhetherEnum" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" />
          </el-select>
        </el-form-item>
        <el-form-item label="显示顺序" prop="dictSort">
          <el-input-number v-model="form.dictSort" :min="1" :max="999999" />
        </el-form-item>
        <el-form-item label="备注" prop="memo">
          <el-input v-model="form.memo" type="textarea" />
        </el-form-item>
      </el-form>
    </div>
    <div class="footer">
      <el-button type="primary" @click="handleUpdate">保 存</el-button>
      <el-button @click="close">取 消</el-button>
    </div>
  </el-drawer>
</template>

<script>
import { doAdd, doUpdate, getDetails, getLocalStorage } from "@/api/mains";
import { succMsg, confirm } from "@/utils/MessageUtils";
import { getEnumData } from "@/api/modules/user.ts";

export default defineComponent({
  name: "DictSubEdit",
  emits: {
    fetchData: null //fetchData事件没有检验
  },
  setup(props, { emit }) {
    const state = reactive({
      formRef: null,
      url: "system/dictData",
      id: "",
      // detailList: [], //枚举数据详情
      predefineColors: [
        "#ff4500",
        "#ff8c00",
        "#ffd700",
        "#90ee90",
        "#00ced1",
        "#1e90ff",
        "#c71585",
        "rgb(255, 120, 0)",
        "hsv(51, 100, 98)",
        "rgb(222,225,230)"
      ],
      form: {
        mainid: "",
        id: "",
        dictValue: "",
        dictLabel: "",
        color: "",
        isDefault: "",
        dictSort: "",
        memo: ""
      },
      WhetherEnum: [],
      title: "",
      dialogFormVisible: false,
      rules: {
        dictValue: [{ required: true, trigger: "blur", message: "请输入字典键值" }],
        dictLabel: [{ required: true, trigger: "blur", message: "请输入字典标签" }],
        isDefault: [{ required: true, trigger: "blur", message: "请选择是否默认" }]
      }
    });

    const showSubEdit = async row => {
      if (row == null || !row.id) {
        state.id = "";
        state.title = "枚举子表新增";
        state.form.mainid = row.mainid;
        //新增设置默认值
        if (state.WhetherEnum != undefined) {
          state.form.isDefault = state.WhetherEnum[0].dictValue;
        }
      } else {
        state.title = "枚举子表编辑";
        state.id = row.id;
        const res = await getDetails(state.url, state.id);
        state.form = res.data;
      }
      state.dialogFormVisible = true;
    };

    //枚举数据缓存
    state.WhetherEnum = getLocalStorage().WhetherEnum;

    if (state.WhetherEnum != undefined) {
      state.form.isDefault = state.WhetherEnum[0].dictValue;
    }

    const close = () => {
      state["formRef"].resetFields();
      state.form = {
        mainid: "",
        id: "",
        dictValue: "",
        dictLabel: "",
        color: "",
        isDefault: "",
        dictSort: ""
      };
      state.dialogFormVisible = false;
    };
    const handleClose = done => {
      confirm("确定退出吗？", () => {
        done();
      });
    };

    //控制保存（更新）
    const handleUpdate = async () => {
      state["formRef"].validate(async valid => {
        if (valid) {
          if (state.id == "") {
            const { code, msg } = await doAdd(state.url, state.form);
            if (code == 200) {
              succMsg(msg);
              const dictRes = await getEnumData();
              localStorage.setItem("localStorageEnumData", JSON.stringify(dictRes.data));
              close();
              emit("fetchData");
            } else {
              //failMsg(msg);
            }
          } else {
            const { code, msg } = await doUpdate(state.url, state.form);
            if (code == 200) {
              succMsg(msg);
              const dictRes = await getEnumData();
              localStorage.setItem("localStorageEnumData", JSON.stringify(dictRes.data));
              close();
              emit("fetchData");
            } else {
              //failMsg(msg);
            }
          }
        }
      });
    };

    return {
      ...toRefs(state),
      showSubEdit,
      close,
      handleUpdate,
      handleClose
    };
  }
});
</script>
<style lang="scss" scoped>
.footer {
  position: fixed;
  right: 0;
  bottom: 0;
  width: 30%;
  padding: 10px;
  text-align: right;
  background: #ffffff;
  border-top: 1px solid #dcdfe6;
}
.footer button {
  width: 45%;
  line-height: 20px;
}
.formbody {
  position: absolute;
  inset: 65px 0 55px;
  overflow: hidden scroll;
  :deep() {
    .el-color-picker__icon {
      left: auto;
    }
    .el-form-item,
    .el-select,
    .el-input {
      width: 100%;
    }
    .el-form-item__content {
      width: 65%;
    }
  }
}
</style>
